import { api as viewerApi } from "v-viewer";
import "viewerjs/dist/viewer.css";

export const previewImages = (imgs: string[], initIndex = 0) => {
  const runtimeConfig = useRuntimeConfig();
  const list = imgs.map((it: any) => {
    if (it && !it.startsWith("http")) {
      return `${getImgPrex()}${it}`;
    }
    return it;
  });
  let navbar = imgs.length > 1 ? true : 0;
  const $viewer = viewerApi({
    options: {
      className: "view_mask",
      initialViewIndex: initIndex,
      // button: false,
      navbar: navbar as any, // 控制下方的预览图
      toolbar: {
        prev: imgs.length > 0 ? true : false,
        next: imgs.length > 0 ? true : false,

        zoomIn: true,
        zoomOut: true,
      },
      fullscreen: false,

      // keyboard:false,
      viewed(e) {},
      // toggleOnDblclick:false
    },
    images: list,
  });
};

// 添加数字动画  numAnimation(document.querySelectorAll(".num_list"));
export const numAnimation = (els: any) => {
  var num_options = {
    duration: 2, // 动画时长
    startVal: 0,
    useEasing: true, // 过渡动画效果，默认ture
    useGrouping: true, // 千分位效果，例：1000->1,000。默认true
    // separator: ',',   // 使用千分位时分割符号
    decimal: ".", // 小数位分割符号
    // prefix: '$',    // 前置符号
    decimalPlaces: 0, // 保留小数点两位
    scrollSpyOnce: false, // 只执行一次
    enableScrollSpy: true,
    // suffix: '#'    // 后置符号，可汉字
  };
  // const numEl = document.querySelectorAll(".num_list");
  Array.from(els).forEach((el) => {
    new window.CountUp(el, (el as HTMLElement).innerHTML, num_options);
  });
};
